Rows & Columns Example Prep

Rows & Columns in Action

grid-template-columns is the property that defines the column layout of your grid - that is how many sections the page should be divided into vertically. The values for this property are the explicit value for each column and the number of columns is defined implicitly by the number of values entered. For example:

grid-template-columns: 60px 60px;

would create two columns of 60px each. If you had two items inside your grid and didn't set their position explicitly, the first item would be placed in the first column and the second item in the second. grid-template-rows follows the same logic, so that:

grid-template-columns: 60px 60px;
grid-template-rows: 160px 60px;

would create a grid with two columns and two rows.

Let's take a look at this in action.

ND001 C01 L04 04 Rows Columns Example

Rows & Columns Example Summary

The layout of a grid is defined using grid-template-columns and grid-template-rows.

Rows & Columns Problem Set

SOLUTION:

`grid-template-rows: 160px 60px;`

Workspace

This section contains either a workspace (it can be a Jupyter Notebook workspace or an online code editor work space, etc.) and it cannot be automatically downloaded to be generated here. Please access the classroom with your account and manually download the workspace to your local machine. Note that for some courses, Udacity upload the workspace files onto https://github.com/udacity, so you may be able to download them there.

Workspace Information:

Default file path:
Workspace type: html-live
Opened files (when workspace is loaded): n/a

Rows & Columns Summary

A CSS Grid is made up of rows and columns which are defined using the CSS properties grid-template-columns and grid-template-rows, which take as values the size of each track.

Rows & Columns Further Research

Further Research

To explore grid setup deeper, you can check out this cool grid visualizer and generator.